<!DOCTYPE html>
<html>
<head>
    <title>应用市场</title>
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="__PLUGIN_TMPL__/public/assets/layui/css/backend.min.css" rel="stylesheet" type="text/css">
    <include file='public/head'>
        <style>
            table th, table td{text-align: center;}
            .ml-10 { margin-left: 10px; }
			.layui-icon{font-size: 14px !important;}
			.layui-form-label{ width: auto;}
			.layui-btn.layui-btn-sm .fa{ font-size: 14px !important;}
			.mr4{ margin-right: 4px;}
			.layui-form-item{ margin-bottom: 0px;}
			.row{ margin: 0 !important;}
			#category li button{
				width: 100%;
			    display: block;
			    padding: 3px 20px;
			    border: none;
			    background-color: white;
			    clear: both;
			    font-weight: normal;
			    line-height: 1.42857143;
			    color: #7b8a8b;
			    white-space: nowrap;
			}
			#category li button:hover{
				background-color: #1A242F;
			}
			.search-active{
				background-color: orange;
			}
			.xiala-ul{
				max-height: 300px;
				overflow: auto;
			}
			.xiala-li{
				min-width: 133px;
				height:30px;
				line-height: 30px;
				cursor: pointer;
				background-color: white;
				border-bottom: 1px solid #ccc;
				text-indent: 2em;
			}
			.xiala-li:hover{
				background-color: #ccc;
			}
        </style>
</head>
<body>
	<div class="wrap js-check-wrap" style="padding: 20px 20px 0px 20px;">
	    <ul class="nav nav-tabs">
	    	<php> $currentTab = 1;</php>
	    	<include file="public/nav" />
	    </ul>
	</div>
    <div class="wrap js-check-wrap">
        <form id="form-index" class="well form-inline margin-top-20 layui-form" action="{:cmf_plugin_url('Appmarket://AdminIndex/index')}" method="post" accept-charset="utf-8">
            <div class="layui-form-item">
            	<div class="layui-inline">
            		<div class="btn-group" role="group" aria-label="">
					    <button type="button"	name="payment"	value="100"  class="btn btn-info form-ele <?php if( $search['payment'] ==100 || empty( $search [ 'search' ] ) ) echo 'search-active'; ?>" ><i class="fa fa-list mr4"></i>全部</button>
					    <button type="button"	name="payment"	value="0"  class="btn btn-primary form-ele  <?php if( $search['payment'] ==0 && !empty( $search [ 'search' ] )  ) echo 'search-active'; ?>"><i class="fa fa-gift mr4"></i>免费</button>
					    <button type="button"	name="payment"	value="1"  class="btn btn-primary form-ele  <?php if( $search['payment'] ==1 && !empty( $search [ 'search' ] )  ) echo 'search-active'; ?>"><i class="fa fa-rmb mr4"></i>收费</button>
					</div>
				</div>
            	<div class="layui-inline">
            		<div class="btn-group">
					  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" name="category" value="{$search['category']}" aria-haspopup="true" aria-expanded="false"> <?php echo $search['categoryName'];?> <span class="caret"></span></button>
					  <ul class="dropdown-menu" id="category">
					  	<li><button type="button" class="form-ele" name="categoryTmp" value="0/全部分类" >全部分类</button></li>
					  	<volist name="categoryList" id="vo" >
							<li><button type="button"  class="form-ele" name="categoryTmp" value="{$vo.id}/{$vo.name}">{$vo.name}</button></li>
						</volist>
					  </ul>
					</div>
				</div>
            	<div class="layui-inline">
					<!-- <button type="button" class="btn btn-primary ml-10" id="userinfo" data="0">会员信息</button> -->
					<button type="button" id="buy-btn" class="btn btn-success ml-10 form-ele <?php if( $search [ 'buy' ] == 1 ) echo 'search-active';?>" name="buy" value="{$search [ 'buy' ] | default = 0}"><?php if( $search [ 'buy' ] == 1 ){ echo '已购应用'; }else{ echo '所有应用';};?></button>
			    </div>
			    <div class="layui-inline" style="position: relative;">
					<input type="text" id="input-module" " autocomplete="off"  onkeyup="inputModule(this);" class="layui-input" name="" placeholder="请输入关键字" value="{$search.keywords|default=''}" />
					<ul class="xiala-ul" style="position: absolute;z-index: 999; display: none;">
						<volist name='moduleList' id='vo'>
							<li onclick="selectLi(this);" class='xiala-li'>{$vo}</li>
						</volist>
					</ul>
			    </div>
			    <div class="layui-inline">
			    	<button type="button" name="keywords" id='input-kws' value="{$search.keywords|default=''}" class="btn btn-success form-ele" onclick=>搜索</button>
			    </div>
				<div class="layui-inline">
			    	<a href="{:cmf_plugin_url('Appmarket://AdminIndex/index')}"><button type="button" name="" value="" class="btn btn-danger ">清除</button></a>
			    </div>
		    </div>
        </form>
        <table class="table table-bordered table-hover">
            <thead>
                <tr class="theader">
                    <th width="50">序号</th>
                    <th width="100">分类</th>
                    <th width="150">插件名称</th>
                    <th width="200">介绍</th>
                    <th width="60">价格</th>
                    <th width="60">版本</th>
					<th width="60">已购</th>
                    <th width="100">操作</th>
                </tr>
            </thead>
            <tbody class="table-body">
            	<volist name ="list" id="vo">
            		<tr>
            			<td>{++$key}</td>
            			<td>{$vo.category}</td>
            			<td>{$vo.title}</td>
            			<td>{$vo.describe}</td>
            			<td>
            				<if condition="$vo['price'] eq 0">
            					免费
            					<else>
            					<span style="font-weight: 800;color: red;">￥{:number_format($vo['price'],2)}</span>
            				</if>
            			</td>
            			<td>{$vo.version}</td>
						<td>
            				<if condition="$vo['bought'] eq 0">
            					<span style="color:red;">未购</span>
            					<else />
            					<span style="color:green;">已购</span>
            				</if>
            			</td>
            			<td>
            				<if condition="$vo['status'] neq 4 ">
            						开发中...
            					<else>
            						<if condition="$vo['bought'] eq 0">
            							<!-- <a class="btn btn-success btn-xs bought-btn" data-tag="{$vo.id}" >购买</a> -->
            						</if>
            						<if condition="$vo['installed'] eq 0">
            							<a class="btn btn-primary btn-xs install-btn" data-tag="{$vo.id}" >安装</a>
            						<else>
										<a href="<?php $url = cmf_parse_name($vo['name'],1).'://adminIndex/index'; echo cmf_plugin_url($url); ?>"  class="btn btn-xs btn-success" >管理</a>
            							<a href="{:cmf_plugin_url('Appmarket://AdminIndex/unInstallOperate')}?name={$vo.name}" class="btn btn-warning btn-xs js-ajax-delete" data-msg="确定要卸载此模块吗？" >卸载</a>
            						</if>
            						<a href="javascript:;" class="btn btn-info btn-xs" onclick="showModuleParticular({$vo.id});">详情</a>
            				</if>
            			</td>
            		</tr>
            	</volist>
            </tbody>
        </table>
		<empty name="$list">
			未检索到相关信息~
		</empty>
        <div class="pager">{$page}</div>
    </div>
<include file='public/scripts'>
<script src="__PLUGIN_TMPL__/public/assets/layui/layui.all.js"></script>

<script src="__STATIC__/js/custom/custom.js"></script>


	<script>
		var formData = {$searchObj};
		//搜索，表单提交
		$( '#form-index .form-ele' ).on('click',function(){
			let name = $(this).attr( 'name' );
			let value = $(this).val() ;
			//我已购买按钮
			if( name == 'buy' ){
				value = ( value == 0 ) ? 1 : 0 ;	
			}
			formData [ name ] = value;
			var url = "{:cmf_plugin_url('Appmarket://AdminIndex/index')}?search=search" ;
			$.each( formData , function( index , value ){
				if(index != 'search' )
				url += '&' + index + '=' + value;
			} );
			window.location.href = url;
		});
		
	</script>

	<script>
	$(function(){
		;!function(){
			var layer = layui.layer
			,form = layui.form;

			//安装
			$('.install-btn').on('click',function(){
				let _this = $(this);
				let id = _this.data('tag');
				let url = "{:cmf_plugin_url('Appmarket://admin_index/installCheck')}?id="+id;
				let title = '模块安装';
				$.get( url , function( data ){
					data = JSON.parse(data);
					switch( data.code){
						//未登录
						case 101:
							doLogin(id);
						break;
						//未购买
						case 102:
							bought(id);
						break;
						//安装界面
						case 103:
						case 104:
							install(id);
						break;
						default:
							let icon = ( data.code == 200 ) ? 1: 5 ;
							layer.msg( data.message  , { icon :icon });
						break;
					}
				});			
			})
			//登录
			var doLogin = function( moduleId )
			{
				let url = '{:cmf_plugin_url("Appmarket://AdminIndex/login")}';
				let title = '登录';
				let btn = [ '登录' , '取消' ];
				var yes = function( index ){
					var res = window["layui-layer-iframe" + index].callbackdata();
					if( res.name == '' ){
						layer.msg('用户名不能为空！');
						return false;
					}
					if( res.password == '' ){
						layer.msg('密码不能为空！');
						return false;
					}
					//加载层-风格4
					let load = layer.msg( '加载中' , { icon: 16 , shade: 0.01 });
					//执行登录
					$.post( '{:cmf_plugin_url("Appmarket://AdminIndex/doLogin")}'  , res , function ( data ){
						let icon = ( data.code == 200 ) ? 1 : 5;
						if( data.code ==  200 ){
							layer.close(index);
							//购买
							bought(moduleId);
						}else{
							layer.msg( data.message , { icon : icon } );
						}
						layer.close(load);
					} , 'json' );
				}
				var cancel =function ( index ){
					layer.close( index );
				}
				layeropen ( url , title , btn , ['500px', '355px'] , yes , cancel  );
			}

			//购买
			var bought = function( moduleId )
			{
				$.post( '{:cmf_plugin_url("Appmarket://AdminIndex/bought")}' , {moduleId:moduleId} , function( data ){
					console.log(data);
					switch ( data.code ){
						case 404 :
							doLogin(moduleId);
						break;
						case 201:
							//install
							install(moduleId);
						break;
						case 200:
							//支付页面
							pay();
						break;
					}
				} , 'json' );

			}
			//支付页面
			var pay = function()
			{
				let url = '{:cmf_plugin_url("Appmarket://AdminIndex/pay")}';
				let title = '产品购买';
				let btn = [ '确定' , '取消' ];
				var yes = function( index ){
					layer.close( index );
				}
				var cancel =function ( index ){
					layer.close( index );
				}
				layeropen ( url , title , btn , ['500px', '355px'] , yes , cancel  );
			}

			//安装
			var install = function( id )
			{
				let url = '{:cmf_plugin_url("Appmarket://AdminIndex/install")}?moduleId='+id;
				let title = '产品安装';
				let btn = [ '安装' , '取消' ];
				var yes = function( index ){
					var res  = window["layui-layer-iframe" + index].sign;
					if( res.item != res.complete || res.canInstall == false ){
						layer.msg( res.message , { icon : 5 } );
						return false;
					}
					$.post( '{:cmf_plugin_url("Appmarket://AdminIndex/installOperate")}?moduleId='+id ,{} , function ( data ){ 
						//data = JSON.parse(data);
						let icon  = ( data.code == 1 ) ? 1 : 5 ;
						layer.msg( data.msg , { icon : icon } );
						if( icon == 1 ){
							setTimeout( function(){
								window.location.reload();
								layer.close(index);
							} , 1200 );
						}
						/*let icon  = ( data.code == 200 ) ? 1 : 5 ;
						layer.msg( data.message , { icon : icon } );
						if( icon == 1 ){
							setTimeout( function(){
								layer.close(index);
							} , 1200 );
						}*/
					}) ,'json';
				}
				var cancel =function ( index ){
					layer.close( index );
				}
				layeropen ( url , title , btn , ['500px', '355px'] , yes , cancel  );

			}

			//购买
			$('.bought-btn').on('click',function(){
				let _this = $(this);
				let id = _this.data('tag');
				let url = "{:cmf_plugin_url('Appmarket://admin_index/bought')}?id="+id;
				$.get( url , function( data ){
					data = JSON.parse(data);
					let icon  = ( data.code == 200 ) ? 1 : 5 ;
					layer.msg( data.message , { icon : icon } );
					if( data.data.type == 'jump' ){
						setTimeout( function () {
							//打开页面
							let title = data.data.title;
							let url = data.data.url
							layeropen( url , title  );
						} , 1200 );
					}
				});			
			})


			$('#pluginedit').on('click',function(){
				var title = '编辑';
				var url="{:cmf_plugin_url('Appmarket://admin_index/pluginedit')}";
				var btn = ['确定','重置'];
				layer.open({
					type: 2,
					title: title,
					shadeClose: true,
					shade: 0.1,
				    skin: 'layui-layer-fast', //样式类名
					area: ['800px', '90%'],
					btn:btn,
					id:'info',
					fixed:false,
					content: url, //iframe的url
					yes: function (index, layero) {
						layer.msg('保存');
					},
					btn2:function(index, layero){
						layer.msg('重置');
						$('form')[0].reset();
						return false;
					}
				});
			})


			$('.btn-upgrade').on('click',function(){
				var title = '信息';
				var url="{:cmf_plugin_url('Appmarket://admin_index/pluginup')}";
				var btn = ['确定','取消'];
				layer.open({
					type: 2,
					title: title,
					shadeClose: true,
					shade: 0.1,
				    skin: 'layui-layer-fast', //样式类名
					area: ['400px', 'auto'],
					btn:btn,
					id:'info',
					fixed:false,
					content: url, //iframe的url
					yes: function (index, layero) {
						layer.msg('升级成功');
					},
					btn2:function(index, layero){
					}
				});
			})


			//layer弹出方法
			var layeropen = function( url , title , btn = [] , area = ['500px', '355px'] , yes = null , cancel = null ){
				layer.open({
					type: 2,
					title: title,
					shadeClose: true,
					shade: 0.1,
				    skin: 'layui-layer-fast', //样式类名
					area: area,
					btn:btn,
					fixed:false,
					content: url, //iframe的url
					yes: function (index, layero) {
						yes( index );
					},
					btn2:function(index, layero){
						cancel(index);
					}
				});
			}






		}();
	})

	

	//查看模块详情
	var showModuleParticular = function( id ){
		let url = '{:cmf_plugin_url("Appmarket://admin_index/particular")}?id='+id;
		let title = '模块详情';
		let btn = ['关闭'];
		//弹窗查看
		layer.open({
			type: 2,
			title: title,
			shadeClose: true,
			shade: 0.1,
		    skin: 'layui-layer-fast', //样式类名
			area: ['80%', '80%'],
			btn:btn,
			id:'info22',
			fixed:false,
			content: url, //iframe的url
			yes: function (index, layero) {
				layer.close(index);
			},
			btn2:function(index, layero){
				alert('取消');
			}
		});
	}

	//购买
	//查看模块详情
	var bought = function( _this , id ){
		let url = '{:cmf_plugin_url("Appmarket://admin_index/bought")}?id='+id;
		let title = '模块购买';
		let btn = ['关闭'];
		//弹窗查看
		layer.open({
			type: 2,
			title: title,
			shadeClose: true,
			shade: 0.1,
		    skin: 'layui-layer-fast', //样式类名
			area: ["700px", "450px"],
			id:'info23',
			fixed:false,
			content: url, //iframe的url
			yes: function (index, layero) {
				layer.close(index);
			},
			btn2:function(index, layero){
				alert('取消');
			}
		});
	}


	//搜索栏 输入模块名称
	var inputModule = function( _this ){
		let value = $(_this).val();
		$('#input-kws').val( value );

		var isFind = false;
		//根据查找的数据显示
		$('.xiala-li').each(function(){
			let text = $(this).text();
			if( value.length == 0 || text.indexOf( value ) != -1 ){
				$(this).show();
				isFind = true;
			}else{
				$(this).hide();
			}
		});
		if( isFind ){
			$('.xiala-ul').show();
		}
	}

	$('#input-module').focus(function(){ 
	 	inputModule($('#input-module'));
	}) ;

	$('#input-module').blur(function(){
		setTimeout(function(){
			$('.xiala-ul').hide();
		},100); 
	}) ;

	
	var selectLi = function(_this){
		let text = $(_this).text();
		$('#input-module').val( text );
		$('#input-kws').val( text );
		$('.xiala-li').each(function(){
			$(this).css({'backgroundColor':'white'});
			if( $(_this).text() == $(this).text() ){
				$(this).css({'backgroundColor':'#ccc'});
			}
			$(this).show();
		});
		$('.xiala-ul').hide();
	}

	 function init() {
        function keydownFn(e) {
            if(e.which===13){
                e.preventDefault();
            }
        }
        var $f = document.getElementById('form-index');
        $f.addEventListener('keydown', keydownFn);
    }
    init();
	</script>
</body>
</html>
